<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix flex flex-row align-center">
        <div class="line" />
        <span class="font18 ml10 flex-auto">待审批列表</span>
      </div>
      <el-form ref="listQuery" :model="listQuery" :inline="true">
        <!-- <el-form-item label="" prop="title">
            <el-radio-group v-model="dateType" size="small" @input="changeType">
              <el-radio-button label="todo">待审批</el-radio-button>
              <el-radio-button label="done">已审批</el-radio-button>
            </el-radio-group>
          </el-form-item> -->
        <el-form-item label="事件名称" prop="title">
          <el-input v-model="listQuery.title" placeholder="请输入事件名称" clearable size="small" style="width: 180px" @keyup.enter.native="getList" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="small" @click="getList">搜索</el-button>
          <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" stripe :data="ticketList" @selection-change="handleSelectionChange">
        <!-- <el-table-column type="selection" width="55" align="center" /> -->
        <el-table-column label="#" type="index" width="80" align="center" />
        <el-table-column label="事件名称" prop="title" align="center" :show-overflow-tooltip="true" />
        <el-table-column label="流转状态" :show-overflow-tooltip="true" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.status === 1">未提交</span>
            <span v-if="scope.row.status === 2">已撤回</span>
            <span v-if="scope.row.status === 0">
              {{ scope.row.state_name }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="上报人" :show-overflow-tooltip="true" align="center" width="120">
          <template slot-scope="scope">
            <span>{{
              scope.row.createUsers
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="上报时间" align="center" prop="create_time" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.create_time) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleView(scope.row)">{{ dateType == 'todo'?'处理上报':'上报详情' }}</el-button>
            <el-button size="mini" type="text" icon="el-icon-time" @click="handleHistoryView(scope.row)">审批历史</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageIndex" :limit.sync="queryParams.pageSize" @pagination="getList" />
    </el-card>
    <HistoryDialog ref="historyDialog" />
  </div>
</template>
<script>
import { workOrderList } from '@/api/baqsj/work-order'
// 搜索
import WorkOrderSearch from './components/search/index'
import HistoryDialog from '../components/history'
export default {
  components: { WorkOrderSearch, HistoryDialog },
  data() {
    return {
      dateType: 'todo',
      users: [],
      nodeList: [],
      dialogVisible: false,
      queryParams: {},
      nodeName: '',
      total: 0,
      loading: false,
      ticketList: [],
      listQuery: {
        page: 1,
        per_page: 10
      },
      ruleForm: {
        work_order_id: '',
        node_id: '',
        user_id: '',
        remarks: ''
      },
      rules: {
        node_id: [{ required: true, message: '请选择节点', trigger: 'change' }],
        user_id: [{ required: true, message: '请选择用户', trigger: 'change' }]
      }
    }
  },
  created() {

  },
  mounted() {
    if (this.$route.query.nodeName != '' && this.$route.query.nodeName != undefined) {
      this.nodeName = this.$route.query.nodeName
    }
    this.getList()
  },
  methods: {
    changeType(val) {
      this.getList()
    },
    resetQuery() {
      this.timeValue = ''
      this.resetForm('listQuery')
      this.getList()
    },
    formatProjectClassify(val) {
      const jsonObj = JSON.parse(val)
      return jsonObj['project_classify']
    },
    getList() {
      this.loading = true
      this.listQuery.page = this.queryParams.pageIndex
      this.listQuery.per_page = this.queryParams.pageSize

      if (this.dateType == 'todo') {
        this.listQuery.classify = 1
      } else if (this.dateType == 'done') {
        this.listQuery.classify = 5
      } else {
        this.listQuery.classify = 1
      }
      if (this.nodeName != '' && this.nodeName != undefined) {
        this.listQuery.nodeName = this.nodeName
      }

      workOrderList(this.listQuery).then(response => {
        this.ticketList = response.data.data
        this.queryParams.pageIndex = response.data.page
        this.queryParams.pageSize = response.data.per_page
        this.total = response.data.total_count
        this.loading = false
      })
    },
    handleSearch(val) {
      for (var k in val) {
        this.listQuery[k] = val[k]
      }
      this.getList()
    },
    handleHistoryView(row) {
      this.$refs.historyDialog.open(row.process, row.id)
    },
    handleView(row) {
      if (this.dateType == 'todo') {
        this.$router.push({ path: '/baqsj/handle-report', query: { processId: row.process, workOrderId: row.id }})
      } else {
        this.$router.push({ path: '/baqsj/review', query: { processId: row.process, workOrderId: row.id }})
      }
    },
    handleSelectionChange() {},
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          inversionWorkOrder(this.ruleForm).then(response => {
            if (response.code === 200) {
              this.getList()
              this.dialogVisible = false
            }
          })
        }
      })
    }
  }
}

</script>
<style scoped></style>
